body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    height: auto; /* Упевнись, що сторінка не має фіксованої висоти */
    overflow: auto; /* Переконайся, що прокрутка дозволена */

}



// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 700

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.roboto-condensed-<uniquifier> {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 700

.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Стилі для меню */
.black-menu {
    background: linear-gradient(135deg, #000000, #000000);
    padding: 15px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    opacity: 0.9;
}

.logo {
    display: flex;
    align-items: center;
}

.logo h1 {
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-size: 42px;
}

.logo-link {
    text-decoration: none;
    color: white;
}

.menu-options {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* елементи в ряд */
    align-items: center;
}

 .menu-options li {
    margin-right: 30px;}

nav ul li:last-child {
    margin-right: 50px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    position: relative;
}

nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background-color: #ccccff;
    transition: width 1s ease;
}

nav ul li a:hover::after {
    width: 100%;
}

nav ul li a:hover {
    color: #ccccff;
}

.company-logo {
    width: 80px;
    height: auto;
    margin-top: -10px;
    margin-bottom: 0px;
}

.menu-toggle {
    display: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
    margin-right: 40px;
}
  .mobile-menu {
    display: none;
  }


  @media (max-width: 960px) {
    .menu-toggle {
        display: block;
    }

    .mobile-menu {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 250px;
        background: rgba(0, 0, 0, 0.9);
        z-index: 1002;
        padding: 20px;
    }

    .mobile-menu.open {
        display: flex;
    }

    .mobile-menu nav ul {
        display: flex;
        flex-direction: column;
    }

    .mobile-menu nav ul li {
        margin: 20px 0;
    }

    .mobile-menu nav ul li a {
        color: white;
        font-size: 20px;
    }

    .close-btn {
        font-size: 30px;
        color: white;
        cursor: pointer;
        align-self: flex-end;
    }

    .nav { display: none;
    }

    .menu-options {
      display: none;
    }
     .black-menu {
       height: 45px;
     }
   }



   @media (max-width: 460px) {
       .logo h1 {
           font-size: 24px;
       }

       .nav ul li a {
           font-size: 16px;
       }

       .intro-button {
           font-size: 18px;
           padding: 6px 12px;
       }

       .black-menu {
         height: 32px;
       }

     .company-logo {
       width: 50px;
       height: 50px;
       }

       .Menu2 {
         list-style-type: none;
       }

       .footer-content {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           width: 100%;
           font-size: 16px;
           height: auto; /* Заміна на auto для адаптації висоти */
           padding: 20px 0; /* Додаємо відступи зверху та знизу */
       }

       .contact-info {
           text-align: center !important;
           margin: 50px 35px 110px 0;
           position: relative;
       }

       .contact-info p, .contact-info a {
           color: white;
           text-decoration: none;
           margin: 5px 0; /* Додаємо відступи між елементами */
       }

       .social-media {
           margin: 15px 0;
           display: flex;
           justify-content: center;
           gap: 15px; /* Відступи між іконками */
       }

       .social-media a {
           font-size: 20px;
           color: white;
       }

       .contact-button {
           background-color: #8781FF;
           color: white;
           text-decoration: none;
           border-radius: 5px;
           font-weight: bold;
           padding: 10px 20px;
           margin: 0 0 85px;
           display: inline-block;
           text-align: center;
       }

       .copyright {
           text-align: center;
           color: white;
           font-size: 14px;
           margin-top: 20px;
       }
     }





     .quote-image {
         width: 100%; /* Задаємо ширину зображення на всю ширину блоку */
         height: 450px; /* Висота зображення 450 пікселів */
         object-fit: cover; /* Зображення буде обрізатися, щоб заповнити блок, зберігаючи пропорції */
     }

     .quote-block {
         position: relative; /* Встановлюємо відносне позиціонування для коректного розміщення внутрішніх елементів */
         text-align: center; /* Центруємо текст всередині блоку */
         color: white; /* Колір тексту білий */
     }

     #blog-title {
         position: absolute; /* Абсолютне позиціонування заголовку */
         top: 100px; /* Відступ зверху 100 пікселів */
         left: 120px; /* Відступ зліва 150 пікселів */
         font-size: 115px; /* Розмір шрифту заголовку */
         font-family: 'Oswald', sans-serif; /* Використовуємо шрифт Oswald */
         font-weight: bold; /* Робимо текст жирним */
         text-transform: uppercase; /* Перетворюємо текст на великі літери */
         z-index: 10; /* Встановлюємо пріоритет для відображення заголовку поверх інших елементів */
     }

     .quote-text {
         position: absolute; /* Абсолютне позиціонування тексту цитати */
         top: 65%; /* Відступ від верхнього краю на 65% */
         left: 70%; /* Відступ від лівого краю на 75% */
         transform: translate(-50%, -50%); /* Центрування тексту відносно точки позиціонування */
         font-size: 26px; /* Розмір шрифту цитати */
         font-weight: bold; /* Жирний текст */
         font-family: 'Amatic SC', sans-serif; /* Використовуємо шрифт Amatic SC */
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 2); /* Додаємо тінь тексту для кращої видимості на світлих зображеннях */
     }

     .quote-author {
         position: absolute; /* Абсолютне позиціонування автора цитати */
         bottom: 30px; /* Відступ знизу 30 пікселів */
         right: 120px; /* Відступ справа 120 пікселів */
         font-size: 23px; /* Розмір шрифту автора */
         font-family: 'Amatic SC', sans-serif; /* Використовуємо шрифт Amatic SC */
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 1); /* Додаємо тінь тексту для кращої видимості на світлих зображеннях */
     }






     /* Основні стилі для сторінки */
     html, body {
         height: 100%; /* Забезпечує повну висоту для контейнерів */
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         display: flex;
         flex-direction: column;
         background-color: #FFFFF0;
     }

     /* Контейнер для контенту */
     .content-wrapper {
         margin-top: 10px;
         position: relative;
         display: flex; /* Горизонтальне розташування сайдбару та статей */
         flex-grow: 1; /* Займає весь доступний простір */
         margin-bottom: 10px;

     }

     /* Стилі для сайдбару */
     .sidebar {
         width: 220px;
         padding: 25px;
         background-color:#f2f6d0;
         box-shadow: 2px 0 5px rgba(0, 0, 0, 0.4);
         border-radius: 0 15px 15px 0;
         display: flex;
         flex-direction: column;
         overflow-y: auto; /* Вертикальна прокрутка для сайдбару */
         height: 100vh;
         position: -webkit-sticky;
         position: sticky;
         top: 80px; /* Фіксація на 80px від верху */
     }

     /* Приховування скроллбара для WebKit-браузерів (Chrome, Safari) */
     .sidebar-content::-webkit-scrollbar {
         width: 0px;
         background: transparent; /* Забезпечує прозорість */
     }

     /* Приховування скроллбара для Firefox */
     .sidebar-content {
         scrollbar-width: none; /* Firefox */
     }

     /* Приховування скроллбара для Edge, Internet Explorer */
     .sidebar-content {
         -ms-overflow-style: none; /* IE and Edge */
     }

     /* Вміст сайдбару */
     .sidebar-content {
         flex-grow: 1;
         overflow-y: scroll; /* Вертикальна прокрутка */
         overflow-x: hidden; /* Приховування горизонтальної прокрутки */
     }

     /* Футер сайдбару */
     .sidebar-footer {
         position: relative; /* Відносне позиціонування */
         padding: 10px 0;
         text-align: center;
         background-color: #f2f6d0;
         border-top: 1px solid #000;
         display: flex;
         justify-content: center; /* Центрування тексту горизонтально */
         align-items: center; /* Центрування тексту вертикально */
     }

     /* Нахилений текст у футері сайдбару */
     .rotated-text {
         font-size: 35px; /* Розмір шрифту */
         font-family: 'Inter', sans-serif; /* Використання шрифту Inter без засічок */
         font-weight: 900; /* Жирний текст */
         color: #000; /* Чорний колір тексту */
         transform: rotate(-5deg); /* Поворот тексту на 5 градусів */
         display: inline-block; /* Забезпечує коректне відображення тексту */
         margin: 10px; /* Відступи */
         margin-right: 30px;
         margin-top: 20px;
     }

     /* Приховуємо елементи, що будуть видимі тільки на мобільних */
     .sidebar-close {
         display: none;
     }

     /* Пошукове поле */
     .search-box {
         width: 90%; /* Ширина пошукового поля */
         padding: 10px; /* Відступи всередині поля */
         margin-bottom: 20px; /* Відступ знизу */
         font-size: 16px; /* Розмір шрифту */
         border: 1px solid #ccc; /* Рамка для поля */
         border-radius: 15px; /* Закруглені кути для поля */
         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Внутрішня тінь */
     }

     /* Стилі для контейнера пошуку */
     .search-container {
         position: relative;
     }

     /* Стилі для підказок */
     .suggestions-list {
         position: absolute;
         top: 110%;
         left: 0;
         right: 0;
         background-color: white;
         /* border: 1px solid #ccc; */
         border-radius: 5px;
         z-index: 1000;
         list-style-type: none;
         padding: 0;
         margin: 0;
         max-height: 200px;
         overflow-y: auto;
     }

     .suggestions-list li {
         padding: 10px;
         cursor: pointer;
     }

     .suggestions-list li:hover {
         background-color: #f0f0f0;
     }

     /* Заголовки і списки в сайдбарі */
     .sidebar h2, .sidebar ul {
         margin-top: 0; /* Відсутність відступу зверху */
     }

     /* Елементи списку в сайдбарі */
     .sidebar ul li {
         margin-bottom: 5.5px; /* Відступ між пунктами */
         font-family: "Oswald";
     }

     /* Посилання в сайдбарі */
     .sidebar ul li a {
         text-decoration: none; /* Прибираємо підкреслення */
         color: #333; /* Колір тексту */
         font-family: 'Roboto', sans-serif; /* Стиль шрифту */
         font-size: 15px; /* Розмір шрифту */
     }

     .sidebar ul li a:hover {
         color: #FF4500; /* Теплий оранжевий колір тексту при наведенні */
     }

     /* Заголовки в сайдбарі */
     .sidebar h2 {
         font-family: 'Roboto Condensed', sans-serif;
         font-weight: 300;
     }





     .articles-header {
         grid-column: 1 / -1; /* Заголовок займає весь рядок зверху */
         text-align: center; /* Центрування заголовку */
         font-family: 'Roboto', sans-serif;
         font-size: 38px; /* Розмір шрифту */
         margin-bottom: 15px; /* Відступ знизу після заголовку */
     }




     .main-area {
         flex: 1;
         padding: 2%;
         background-color: #FFFFF0;
         display: grid;


         justify-items: center; /* Центрування блоків по горизонталі */
         justify-content: center; /* Центрування всієї сітки */
         position: relative; /* Для правильного позиціонування пагінації */
         padding-bottom: 60px;
         margin-left: 25px;
         margin-left: 25px; /* Простір для пагінації під статтями */
     }



     /* Зникання кнопки під час відкриття сайдбару */
     .hidden {
         display: none;
     }

     /* Стиль для перекриття екрану, коли сайдбар відкритий */
     .sidebar-overlay {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5); /* Напівпрозорий фон */
         z-index: 99 ; /* Розташування позаду сайдбару */
     }

     .sidebar-overlay.open {
         display: block; /* Показати перекриття, коли сайдбар відкритий */
     }



     /* Показуємо сайдбар, коли він відкритий */
     .sidebar.sidebar-open {
         left: 0; /* Переміщення сайдбару на екран */
     }

     /* Стиль для кнопки закриття сайдбару */
     .sidebar-close {
         display: none;
         position: absolute;
         top: 15px;
         right: 15px;
         background-color: transparent;
         border: none;
         font-size: 24px;
         cursor: pointer;
     }
     .sidebar-toggle{
       display: none;
     }



     /* Медіа-запити для мобільних пристроїв */
     @media (max-width: 460px) {
         /* Приховуємо стандартний сайдбар на мобільних */
         .sidebar {
             display: block;
             position: fixed;
             top: 0;
             transition: left 0.3s ease; /* Плавний перехід для появи */
             left: -100%; /* Початкове положення поза екраном */
             width: 50%; /* Ширина сайдбару на мобільному */
             height: 100%;
             background-color: #f2f6d0; /* Фоновий колір сайдбару */
             z-index: 1000; /* Високий z-index для перекриття інших елементів */
             padding: 15px; /* Відступи всередині */
             overflow-y: auto; /* Прокрутка для довгих списків */
         }


         /* Показуємо сайдбар, коли він відкритий */
         .sidebar.open {
             display: block;
             left: 0; /* Показуємо сайдбар при відкритті */
         }

  .sidebar-overlay {
    display: none; /* Початково прихований */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозорий чорний фон */
    z-index: 999; /* Позаду сайдбару */
    transition: opacity 0.3s ease; /* Плавний перехід для оверлею */
}

         /* Стилі для кнопки відкриття сайдбару */
         /* CSS */
         .sidebar-toggle {
             position: fixed;
             top: 100px; /* Відстань від верху в 1 см (приблизно 10 пікселів) */
             left: -6%;
             z-index: 1002;
             display: block;
             background-color: #f2f6d0;
             color: #000;
             border: none;
             border-radius: 20px;
             padding: 12px 30px;
             font-family: 'Arial', sans-serif;
             font-size: 18px;
             box-shadow: 2px 0 5px rgba(0, 0, 0, 1);
             cursor: pointer;
             width: 95px;
             opacity: 1; /* Початково прихована */
             transform: translateY(-20px); /* Початково зміщена вгору */
             transition: opacity 0.5s ease, transform 0.5s ease; /* Анімація появи */
         }

         .articles-header {
        margin-right: 20px;
         }



         /* Стилі для кнопки закриття сайдбару */
         .sidebar-close {
             display: block;
             position: absolute;
             top: 15px;
             right: 15px;
             background-color: transparent;
             border: none;
             font-size: 24px;
             cursor: pointer;
         }

         /* Показати оверлей, коли сайдбар відкритий */
         .sidebar.open + .sidebar-overlay {
             display: block;
         }
         .sidebar-toggle.hidden {
    display: none; /* Приховуємо кнопку меню, коли сайдбар відкритий */
}

.sidebar-overlay.open {
    display: block; /* Відкриваємо оверлей */
    opacity: 1; /* Повна прозорість */
}
     }


     @media (max-width: 460px) {
         #blog-title {
             font-size: 80px; /* Перший рівень зменшення */
             text-align: center;
             left: 0;
             right: 0;

         }

         .quote-image {
             height: 450px; /* Зменшена висота для мобільних екранів */

         }

         .quote-text {
             position: absolute;
             font-size: 22px; /* Перший рівень зменшення */
             left: 50%;
             width: 70%;
             text-align: center; /* Центрування цитати */
             top: 70%;
             margin: 0 auto;
         }

         .quote-author {
             font-size: 18px; /* Перший рівень зменшення */
             text-align: center; /**/
             margin-top: -10px;
             margin-right: -40px;
         }
     }

     @media (max-width: 400px) {
       #blog-title {
           font-size:70px; /* Перший рівень зменшення */
           text-align: center;
           left: 0;
           right: 0;

       }

       .quote-image {
           height: 450px; /* Зменшена висота для мобільних екранів */

       }

       .quote-text {
           position: absolute;
           font-size: 20px; /* Перший рівень зменшення */
           left: 50%;
           width: 70%;
           text-align: center; /* Центрування цитати */
           top: 70%;
           margin: 0 auto;
       }

       .quote-author {
           font-size: 16px; /* Перший рівень зменшення */
           text-align: center; /**/
           margin-top: -10px;
           margin-right: -40px;
       }
     }

     @media (max-width: 350px) {
       #blog-title {
           font-size: 60px; /* Перший рівень зменшення */
           text-align: center;
           left: 0;
           right: 0;

       }

       .quote-image {
           height: 450px; /* Зменшена висота для мобільних екранів */

       }

       .quote-text {
           position: absolute;
           font-size: 18px; /* Перший рівень зменшення */
           left: 50%;
           width: 70%;
           text-align: center; /* Центрування цитати */
           top: 70%;
           margin: 0 auto;
       }

       .quote-author {
           font-size: 14px; /* Перший рівень зменшення */
           text-align: center; /**/
           margin-top: -10px;
           margin-right: -40px;
       }
     }






     @media (max-width: 470px) {
         .main-area {
             grid-template-columns: 1fr;
             padding: 0 10px; /* Зменшуємо відступи зліва і справа для менших екранів */
         }





     }

     @media (max-width: 400px) {
         .main-area {
             grid-template-columns: 1fr;
             padding: 0 8px; /* Ще менші відступи */
         }


     }





     /* Загальний контейнер статті */


     /* Заголовок статті */
     .visitor-counter {
       font-size: 16px;
       color: #333;
       background-color: #e7e1aa;
       padding: 5px;
       margin: 10px auto;
       left: 20px;
       border: 1px solid #ddd;
       border-radius: 8px;
       margin-right: -35vw;
       width: fit-content;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

   .visitor-counter strong {
       font-size: 18px;
       color: #795548;
   }

   .visitor-counter span {
       display: inline-block;
       margin: 0 5px;
   }


     /* Підзаголовок статті */
     .article-subtitle {
       font-size: 19px;
       color: #333333;
       margin-bottom: 30px;
       margin-top: 30px;
       text-align: left;
       font-family: "Roboto", sans-serif;
       font-weight: 400;
       font-style: normal;
       line-height: 1.5;
     }

     /* Зміст */
     .article-toc {
       margin-bottom: 20px;
       padding: 20px;
       background: #f9f9f9;
       border: 1px solid #ddd;
       border-radius: 5px;
     }

     .article-toc h3 {

       margin-bottom: 20px;
       font-size: 25px;
       color: #333;
       font-family: "Poppins", sans-serif;
       font-weight: 700;
       font-style: normal;
     }

      h4 {
       padding-top: 20px;
       margin-bottom: 10px;
       font-size: 20px;
       color: #333;
       font-family: "Poppins", sans-serif;
       font-weight: 700;
       font-style: normal;
     }

     h6 {
      margin-left: 2.7vw;
      margin-bottom: 7px;
      font-size: 18px;
      color: #333;
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      font-style: normal;
    }

    .h6 {
        margin-left: 3vw;
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 15px;
        color: #2e2e2e;
    }


     .article-toc ul {
       list-style-type: none;
       padding-left: 0;

     }

     .article-toc li {
       margin-bottom: 15px;

     }

     .article-toc a {
       text-decoration: none;
       color: #5d6d7e;


       font-family: "Merriweather", serif;
font-weight: 400;
font-style: normal;
     }

     .article-toc a:hover {

       color: #34495e;
     }

     /* Основний текст */
     .article-content h3 {
       scroll-margin-top: 200px;
       font-size: 26px;
       margin-top: 55px;
       margin-bottom: 10px;
       color: #333;
       border-bottom: 2px solid #f0f0f0;
       padding-bottom: 8px;
       font-family: "Roboto", serif;
font-weight: 600;
font-style: normal;

     }

     .article-content p {
       font-size: 18px;
       line-height: 1.6;
       margin-bottom: 15px;
       margin-top: 10px;
       color: #2e2e2e;

  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;

     }

     /* Виділення тексту */
     .article-content strong {
       color: #000;
       font-weight: bold;
     }

     /* Посилання в тексті */
     .article-content a {
       color: #007bff;
       text-decoration: underline;
     }

     .article-content a:hover {
       color: #0056b3;
       text-decoration: none;
     }

     /* Інтегровані зображення */
     .inline-image {
       margin: 45px 0;
       text-align: center;
     }

     .inline-image img {
       max-width: 100%;
       height: auto;
       border-radius: 5px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     }

     .inline-image figcaption {
       font-size: 14px;
       color: #555;
       margin-top: 5px;
     }

     /* Метаінформація статті */
     .article-meta {
       font-size: 14px;
       color: #777;
       margin-top: 20px;
       text-align: right;
     }

   pre {
       font-size: 18px;
       line-height: 1.6;
       margin-bottom: 15px;
       margin-top: 10px;
       color: #2e2e2e;
   }

   /* Контейнер для таблиці */
   .table-container {
       margin-right:10px; /* Відступ таблиці праворуч */
       overflow-x: hidden;
       margin-left: -5px;/* Відключає горизонтальне прокручування */
   }

   /* Основний стиль таблиці */
   .styled-table {
       font-family: 'Helvetica', 'Arial', sans-serif;
       width: 100%;
       border-collapse: collapse;
       background-color: #FCFFEB;
       border-radius: 8px;
       border: 2px solid #422040;
       line-height: 1.8;
       margin-top: 20px;
   }

   /* Заголовки таблиці */
   .vertical-header {
       background-color: #422040;
       color: white;
       font-size: 16px;
       padding: 12px;
       border: 1px solid #422040;
       writing-mode: vertical-rl; /* Робить заголовки вертикальними */
       text-orientation: mixed;
       text-align: center;
   }

   .horizontal-header {
       background-color: #422040;
       color: white;
       font-size: 16px;
       padding: 12px;
       border: 1px solid #422040;
       text-align: center;
   }

   /* Клітинки */
   td {
       padding: 12px;
       text-align: left;
       border: 1px solid #422040;
   }

   /* Вертикальний стиль для першої колонки */
   .category {
       writing-mode: vertical-rl;
       text-orientation: mixed;
       background-color: #EFEFEF;
       font-weight: bold;
       padding: 10px;
       text-align: center;
   }

   /* Ховер-ефект для рядків */
   .styled-table tr:hover {
       background-color: #f0f0f0;
       transition: background-color 0.2s;
   }

   /* Адаптивність для телефонів (450px - 340px) */
   @media (max-width: 450px) {
       .styled-table {
           display: table;
           width: 100%;
       }

       .horizontal-header {
           writing-mode: horizontal-tb; /* Повертає заголовки у горизонтальний режим */
           font-size: 14px;
           padding: 8px;
       }

       .vertical-header {
           writing-mode: vertical-rl;
           text-orientation: mixed;
           font-size: 14px;
           padding: 8px;
       }

       td, .category {
           padding: 8px;
           font-size: 14px;
       }
   }

   /* Адаптивність для телефонів (менше 340px) */
   @media (max-width: 340px) {
       .styled-table {
           display: table;
           width: 100%;
       }

       .horizontal-header {
           font-size: 12px;
           padding: 6px;
       }

       .vertical-header {
           font-size: 12px;
           padding: 6px;
       }

       td, .category {
           padding: 6px;
           font-size: 12px;
       }
   }


   /* Стилі для кнопки */
   .open-modal-btn {
       background-color: #F0E68C;
       color: #333;
       padding: 15px 30px;
       border: none;
       border-radius: 8px;
       cursor: pointer;
       transition: background-color 0.3s;
       margin: 20px;
       font-family: 'Helvetica', 'Arial', sans-serif;
       font-size: 18px;
   }

   .open-modal-btn:hover {
       background-color: #D2B48C;
   }

   /* Фон для модального вікна */
   .modal {
       display: none;
       position: fixed;
       z-index: 10;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: rgba(0, 0, 0, 0.7);
   }

   /* Вміст модального вікна */
   .modal-content {
       background-color: #ECEAD0;
       margin: 50px auto 0 auto;
       padding: 20px;
       border: 2px solid #422040;
       border-radius: 8px;
       width: 80%;
       max-width: 600px;
       overflow-y: auto;
       max-height: 80vh;
       position: relative;
       font-family: 'Helvetica', 'Arial', sans-serif;
   }

   /* Центрування на ПК */
   @media (min-width: 768px) {
       .modal-content {
           margin-top: 39vh;
       }
   }

   /* Кнопка закриття */
   .close-btn {
       color: #422040;
       position: absolute;
       top: 10px;
       right: 15px;
       font-size: 32px;
       font-weight: bold;
       cursor: pointer;
       transition: color 0.3s;
   }

   .close-btn:hover {
       color: red;
   }

   /* Ресурсні елементи */
   .resources-list {
       margin-top: 20px;
   }

   /* Вирівнювання ресурсних елементів */
   .resource-item {
       margin-bottom: 15px;
       font-size: 18px;
       display: flex;
       flex-direction: column; /* Розташування елементів вертикально */
       align-items: flex-start; /* Вирівнювання ліворуч */
   }

   /* Заголовок та посилання */
   .resource-title {
       font-weight: bold;
       margin-bottom: 5px; /* Відступ між назвою та посиланням */
   }

   .resource-item a {
       color: #1a73e8;
       text-decoration: none;
       margin-left: 25px; /* Відступ зліва для посилання */
   }

   .resource-item a:hover {
       text-decoration: underline;
   }

   /* Адаптація для телефонів від 450px до 330px */
   @media (max-width: 450px) {
       .modal-content {
           width: 90%;
           max-width: 350px;
           padding: 15px;
           margin: 25vh auto 0 auto;
       }

       .open-modal-btn {
           font-size: 16px;
           padding: 12px 25px;
       }

       .close-btn {
           font-size: 28px;
           top: 5px;
           right: 10px;
       }

       .resource-item {
           font-size: 16px;
       }
   }

   /* Адаптація для телефонів менше 330px */
   @media (max-width: 330px) {
       .modal-content {
           width: 95%;
           max-width: 300px;
           padding: 10px;
           margin: 20vh auto 0 auto;
       }

       .open-modal-btn {
           font-size: 14px;
           padding: 10px 20px;
       }

       .close-btn {
           font-size: 24px;
       }

       .resource-item {
           font-size: 14px;
       }
   }








     /* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */



     .comentarii{
       font-size: 26px;
       color: #333;
       font-family: "Arial", serif;
font-weight: 700;
font-style: normal;
margin-top: 70px;
text-align: center;
     }
     .container {
     background: white;
     width: auto;
     margin: 0 auto;
     padding: 15px;
     border: 1px solid #9e9e9e;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     background-color: #e2dcba;
   }
   .comment, .reply {
     margin-top: 10px;
     padding: 15px;
     border: 1px solid #ddd;
     border-radius: 5px;
     position: relative;
     background: #fff;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   }
   .reply {
     margin-left: 20px;
     background: #f9f9f9;
   }
   .comment .name {
     font-weight: bold;
     display: block;
     margin-bottom: 5px;
     margin-right: 10px;
   }
   .comment .message {
     margin-bottom: 10px;
     margin-right: 13vw;

   }
   .comment .date {
     font-size: 12px;
     color: gray;
     position: absolute;
     bottom: 5px;
     right: 10px;
   }
   .reply .date {
     font-size: 12px;
     color: gray;
     position: absolute;
     bottom: 5px;
     right: 10px;
   }
   button.reply {
     background: transparent;
     border: none;
     color: #007BFF;
     font-size: 12px;
     cursor: pointer;
     position: absolute;
     top: 5px;
     right: 10px;
     display: flex;
     align-items: center;
     border: 1px solid #e0e0e0;
   }
   button.reply::before {
     content: '\21b7';
     margin-right: 5px;
     font-size: 14px;
   }
   .chat-messages {
     max-height: 400px;
     overflow-y: auto;
     padding: 15px;
     border: 1px solid #999675;
     border-radius: 10px;
     margin-bottom: 15px;
     background-color: #e4ffcd;
   }
   form {
     margin: 10px;
   }
   form h3 {
     margin-bottom: 10px;
   }
   form input, form textarea {
     width: 97.5%;
     padding: 10px;
     margin-bottom: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
   }
   form button.submit {
     background: #4CAF50;
     color: white;
     border: none;
     cursor: pointer;
     padding: 10px 20px;
     width: 100%;
     border-radius: 5px;
   }

   .quote1 {
     font-size: 18px;
         margin-top: 25px;
         margin-bottom: 20px;
         padding: 15px;
         border-left: 7px solid #8781FF;
         font-style: italic;
         color: #555;
         font-family: 'Roboto', sans-serif;
         background-color: #f9f9f9;
       border-radius: 10px; /* Згладжені кути */
       box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* Глибока тінь */

   }

   .cite1 {
       display: block;
       text-align: right;
       font-size: 16px;
       color: #00ffcc; /* Кольоровий акцент для джерела */
       margin-top: 5px;
       font-weight: bold;
       margin-bottom: -1px;
       padding-top: 3px;
   }


   /* Медіа-запити для адаптації чату на екранах розміром 460–350 пікселів */
   @media (max-width: 460px) {
     .visitor-counter {
       font-size: 16px;
       color: #333;
       background-color: #e7e1aa;
       padding: 5px;
       margin: 10px auto;
       left: 20px;
       border: 1px solid #ddd;
       border-radius: 8px;
       margin-right: -43vw;
       width: fit-content;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

       .container {
         margin-right: 5vw;
       }
       .chat-messages {
           max-height: 300px; /* Зменшення висоти контейнера для коментарів */
           padding: 10px; /* Менші відступи */
       }

       .comment, .reply {
           font-size: 14px; /* Зменшення шрифтів */
           padding: 10px;
       }

       .comment .name, .reply .name {
           font-size: 12px; /* Шрифт імен */
       }

       .comment .message, .reply .message {
           font-size: 13px; /* Шрифт повідомлень */
           margin-right: 17vw;
       }

       .comment .date, .reply .date {
           font-size: 10px; /* Шрифт дати */
       }

       button.reply {
           font-size: 10px; /* Менший розмір кнопки відповіді */
           padding: 5px; /* Менші відступи кнопки */
       }

       /* Форми для введення коментарів */
       form input, form textarea {
           font-size: 14px; /* Менший шрифт для форми */
       }

       form button.submit {
           font-size: 14px; /* Розмір кнопки відправки */
           padding: 8px 15px;
       }
       .messages {
         margin-right: 17vw;

       }
       .comment {
         padding-bottom: 20px;
       }
       .article-content p {
         margin-right: 10px;
         font-size: 17px;
       }
       .inline-image {
         margin-right: 5vw;
       }
       .article-subtitle {
         margin-right: 4vw;
       }
       .article-toc a{
         font-size: 18px;

       }
       .article-toc {
         margin-right: 6vw;
       }


   }

   /* Медіа-запит для екранів до 400px */
   @media (max-width: 400px) {
       .chat-messages {
           max-height: 250px;
       }

       .comment, .reply {
           padding: 8px;
       }

       .comment .message, .reply .message {
           font-size: 12px;
       }

       .comment .date, .reply .date {
           font-size: 9px;
       }

       button.reply {
           font-size: 9px;
           padding: 4px;
       }
       pre {
           font-size: 16px;
           line-height: 1.6;
           margin-bottom: 15px;
           margin-top: 10px;
           color: #2e2e2e;
       }
   }
   .article-toc a{
     font-size: 17px;

   }


   /* Медіа-запит для екранів до 350px */
   @media (max-width: 350px) {
       .chat-messages {
           max-height: 200px;
       }
       pre {
           font-size: 14px;
           line-height: 1.6;
           margin-bottom: 15px;
           margin-top: 10px;
           color: #2e2e2e;
       }

       .comment, .reply {
           padding: 5px;
       }

       .comment .message, .reply .message {
           font-size: 11px;
       }

       .comment .date, .reply .date {
           font-size: 8px;
       }

       button.reply {
           font-size: 8px;
           padding: 3px;
       }
       .article-toc a{
         font-size: 16px;

       }
   }








  footer {
      background-color:#121118;
      color:white;
      padding:40px 30px;
      text-align:center;
      position: relative;
  }

  .footer-content {
      display:flex;
      justify-content:space-between;
      align-items:center;
      width:100%;
      font-size:20px;
  }

  .contact-info, .social-media {
      flex:1;
      text-align:left;
  }

  .contact-info p, .contact-info a {
      display:block;
      margin-bottom:15px;
      color:white;
      text-decoration:none;
      margin-left:30px;
      font-family: Times New Roman;
  }

  .social-media {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
  }

  .social-media a {
      font-size:24px;
      margin:0 10px;
      color:white;
  }

  .contact-button {
      background-color:#8781FF;
      color:white;
      padding:10px 20px;
      text-decoration:none;
      border-radius:5px;
      font-weight:bold;
      position:absolute;
      margin-left: 20px;
      bottom:40px;
  }

  .contact-button:hover {
      background-color:#0056b3;
  }

  .copy rights {
      font-size:14px;
      color:#ccc;
      position:absolute;
      bottom:10px;
      width:100%;
      text-align:center;
  }